import React from "react"
import Header from "../header/index"
import "./forget.css"
import { getCheckoutImg,editPassword,loggout} from "../../api/index"
import { Button,Toast} from 'antd-mobile';
class Forget extends React.Component{
        constructor(){
            super()
            this.state={
                imgUrl:"",
                username:"",
                oldpassword:"",
                newpassword:"",
                cfnewpassword:"",
                checkoutcode:"",
            }
        }
        componentDidMount(){
            getCheckoutImg().then(res=>{
                this.setState({
                    imgUrl:res.data.code
                })
            })
        }
        changeImg(){
             getCheckoutImg().then(res=>{
                 this.setState({
                      imgUrl:res.data.code
                 })
             })
        }
        usnHandler(e){
                this.setState({
                    username:e.target.value
                })
        }
        oldpsdHandler(e){
                this.setState({
                    oldpassword:e.target.value
                })
        }
        newpsdHandler(e){
            this.setState({
                newpassword:e.target.value
            })
            
        }
        cfnewpsdHandler(e){
            this.setState({
                cfnewpassword:e.target.value
            })
            
        }
        codeHandler(e){
            this.setState({
                checkoutcode:e.target.value
            })
        }
        editHandler(){
            // console.log(this.state.cfnewpassword)
            if(!this.state.username){
                Toast.fail("请输入账号名", 1);
                return
            }else if(!this.state.oldpassword){
                Toast.fail("请输入旧密码", 1);
                return
            }else if(!this.state.newpassword){
                Toast.fail("请输入新密码", 1);
                return
            }else if(!this.state.cfnewpassword){
                Toast.fail("请输入确认新密码", 1);
                return
            }else if(!this.state.checkoutcode){
                Toast.fail("请输入验证码", 1);
                return
            }else if(!(this.state.cfnewpassword==this.state.newpassword)){
                Toast.fail("两次密码输入不一致", 1);
                return
            }
            if(this.state.username ||this.state.oldpassword ||this.state.checkoutcode||this.state.cfnewpassword||this.state.newpassword){
                // console.log(this.state.username,"=========",this.state.username,"===========",parseFloat(this.state.checkoutcode) )
                let obj ={
                    username:this.state.username,
                    oldpassWord:this.state.oldpassword,
                    newpassword:this.state.newpassword,
                    confirmpassword:this.state.cfnewpassword,
                    captcha_code:this.state.checkoutcode
                }
                editPassword(obj).then(res=>{
                    console.log(res)
                    if(res.data.status){
                        Toast.fail("修改成功", 1);  
                        this.props.history.push("/login")
                        loggout().then()
                    }else{
                        Toast.fail(res.data.message, 1); 
                        return
                    }
                    // if(res.data.status){
                    //     Toast.fail("验证码过期", 1);
                    //     return
                    // }else{
                    //     this.props.history.push("/app/mine")
                    // }
                })
            }
        }
      render(){
          return(
              <div>
                  <Header title={"重置密码"}/>
                  <div className="login-main">
                     <div className="login-main_input">
                         <div className="main—input_item">
                              <div className="login-icon-userName"></div><input type="text" value={this.state.username} className="login-userName" placeholder="账号" onChange={this.usnHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                               <div className="login-icon-password"></div><input type="text" value={this.state.oldpassword} className="login-password" placeholder="旧密码"  onChange={this.oldpsdHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                               <div className="login-icon-password"></div><input type="text" value={this.state.newpassword} className="login-password" placeholder="新密码"  onChange={this.newpsdHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                               <div className="login-icon-password"></div><input type="text" value={this.state.cfnewpassword} className="login-password" placeholder="确认新密码"  onChange={this.cfnewpsdHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                              <input type="text" className="login-checkoutCode" placeholder="验证码" value={this.state.checkoutcode}  onChange={this.codeHandler.bind(this)}/>
                              <div className="checkoutImgWrap">
                                   <img  src={this.state.imgUrl}/>
                                   <div className="checkoutImg-Rewrite">
                                       <span>看不清</span>
                                        <a href="javascript:;" className="changeImg" onClick={this.changeImg.bind(this)}>换一张</a>
                                   </div>
                              </div>
                         </div>
                         <Button className="login-submit" onClick={this.editHandler.bind(this)}>确认修改</Button>
                     </div>
                 </div>
              </div>
          )
      }
}

export default Forget